<template>
  <div id="app">
      <!-- router-link是一个导航组件，类似于a标签 -->
      <router-link to="/home">Home</router-link> |
      <router-link to="/discover">Discover</router-link> |
      <router-link to="/friend">BTS</router-link> |
      <router-link to="/goods">产品页</router-link>  |
      <router-link to="/detail">详情页</router-link> |
      <router-link to="/count">计数器</router-link> |
      <router-link to="/gouwuche">shopping</router-link> |
      <router-link to="/axios">axios使用</router-link> |

      <button @click="jump">朴实无华的按钮</button> 
    <router-view />
  </div>
</template>
<script>
  export default {
    methods:{
      jump(){
        //编程式导航，使用js逻辑来控制路由的跳转，而不是使用route-link

        //push(用最多) 向浏览器历史记录栈中添加一个记录
        //直接传入路径
        // this.$router.push('/discover')
        //传入对象，使用路径跳转
        // this.$router.push({ path: '/discover' })
        //传入对象，使用具名跳转
        // this.$router.push({ name:"Toplist"})
        
        //传入参数 query params 这两种传参有什么区别？
          //query刷新页面不会丢失
          //params刷新页面会丢失，解决：本地存储
        // this.$router.push({path:"Home",query:{song:"惊雷"}})
        //直接传递params的时候，需要使用name来进行跳转，不然传递是不成功的
        //this.$router.push({name:"home",params:{song:"惊雷"}})

        //replace  替换掉上次的历史记录
          //和push用法一模一样，唯一区别：会替换掉上一个历史记录，
        // this.$router.replace("/discover")

        //go(number)  去到第几个历史记录
        //this.$router.go(-2)   //后退2个记录，以当前位置是0

        //forward   前进
        //back  回退

        console.log(this.$router);
      }
    }
  }

</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>
